<template>
	<view class="content">
		<view class="box">
			<view class="nav">
				<view>
					{{list.workUserPlan.workPath.title}}
				</view>
				<view>
					{{list.cameramanSex =='male_photography' ? '男' : '女' }}{{list.cameramanType=="truing" ? '普通' :'高级' }}摄影师{{list.shootingMethod =="ordinary_photographer" ?'精修' :'简修' }}
				</view>
				<view v-if="list.carType == 'five_seats'">
					五座车
				</view>
				<view v-else-if="list.carType== 'seven_seats'">
					七座车
				</view>
				<view v-else="list.carType== 'no_package_car'">
					不包车
				</view>
				<!-- <view>
					{{list.workPackage.carPackage.name}}
				</view> -->
				<view>
					{{list.reservationDate}}
				</view>
			</view>
			<view class="back">
				<view>
					<text>订单状态：</text>
					<text v-if="list.orderStatus == '0'">待支付</text>
					<text v-if="list.orderStatus == '1'">未开始</text>
					<text v-if="list.orderStatus == '2'">进行中</text>
					<text v-if="list.orderStatus == '3'">待确认</text>
					<text v-if="list.orderStatus == '4'">已完成</text>
					<text v-if="list.orderStatus == '5'">已取消</text>
				</view>
				<view>
					<text>订单编号：</text>
					<text>{{list.orderNumber}}</text>
				</view>
				<view>
					<text>下单时间：</text>
					<text>{{list.createTime}}</text>
				</view>
				<view>
					<text>订单金额：</text>
					<text>{{list.amount}}元</text>
				</view>
				<view>
					<text>订单金额详情：</text>
					<text>摄影师{{list.photoAmount}}+包车费用{{list.carAmount}}+路线金额{{list.pathAmount}}={{list.amount}}</text>
				</view>
				<view class="button">
					<button @click="getRules">查看交易规则</button>
				</view>
			</view>
		</view>

		<view class="pace">
			<button @click="goBack()">取消订单</button>
			<button @click="goNextStep()">支付{{list.amount}}元</button>
		</view>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/DateTimePicker.vue'
	export default {
		data() {
			return {
				from: {},
				list: {},
				reservationDate: '',
				show: false
			};
		},
		methods: {
			// 返回上一步
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 选择日期
			confirm() {
				this.show = false
			},
			// 支付
			async goNextStep() {
				let that = this
				let res = await that.$u.api.getwxpay({
					orderNumber: that.list.orderNumber
				})
				if (res.code == 200) {
					wx.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageVal,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success(res1) {
							that.$u.toast('支付成功')
							uni.reLaunch({
								url: '/packagesMe/me/myOrder'
							})
						},
						fail(res1) {
							that.$u.toast('支付失败')
							uni.reLaunch({
								url: '/packagesMe/me/myOrder'
							})
						}
					})
				}
			},
			async getuserPlan() {
				let res = await this.$u.api.getuserPlan({
					pathId: this.from.pathId,
					cameramanSex: this.from.cameramanSex,
					shootingMethod: this.from.shootingMethod,
					cameramanType: this.from.cameramanType,
					carType: this.from.carType,
					reservationDate: this.reservationDate
				})
				if (res.code == 200) {
					this.list = res.data
				}
			},
			// 查看交易规则
			getRules() {
				uni.navigateTo({
					url: '/packagesIndex/pages/costCalculation/costCalculation'
				})
			},
			async getcreateOrder(id) {
				let res = await this.$u.api.getcreateOrder({
					packageId: id,
					reservationDate:this.reservationDate
				})
				if (res.code == 200) {
					this.list = res.data
				}

			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			if (options.from) {
				this.from = JSON.parse(decodeURIComponent(options.from))
				this.reservationDate = options.reservationDate
				this.getuserPlan() //订单
			}
			if (options.id) {
				this.reservationDate = options.reservationDate
				this.getcreateOrder(options.id)
			}
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		components: {
			DateTimePicker
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		height: 100vh;
		background: linear-gradient(180deg, #BDD8FD 0%, #FFFFFF 100%);

		.box {
			background-color: #FFFFFF;
			border-radius: 30rpx;
			margin: 60rpx 20rpx;
			padding: 20rpx;
			height: 902rpx;

			.nav {
				padding-bottom: 20rpx;
				box-sizing: border-box;
				border-bottom: 4rpx solid #F6F6F6;

				view {
					padding: 10rpx 30rpx;
					box-sizing: border-box;

					&:nth-child(1) {
						font-weight: 600;
					}
				}
			}

			.back {
				view {
					display: flex;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					justify-content: space-between;
					font-size: 28rpx;
					color: #000000;

					text {
						&:nth-child(2) {
							text-align: right;
							width: 65%;
							display: block;
						}
					}
				}

				.default {
					font-size: 20rpx;
					color: #FB3D3B;
					padding: 0 30rpx;
					box-sizing: border-box;
				}

				.button {
					display: flex;
					justify-content: flex-end;

					button {
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 2rpx solid rgba(217, 217, 217, 0.5);
						background-color: #FFFFFF;
						padding: 20rpx 20rpx;
					}
				}
			}
		}

		.pace {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: f6f6f6;
			padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0rpx;

			button {
				flex: 1;

				&:nth-child(1) {
					color: #000000;
					background-color: #fff;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					margin-right: 20rpx;
				}

				&:nth-child(2) {
					color: #ffffff;
					background-color: #096EF4;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					// margin-right: 20rpx;
				}
			}
		}
	}
</style>